<script setup lang="ts">
import { inject, onBeforeMount, } from 'vue';
import { switchLoginModelShowKey, SocialInfo } from '@/type';
import { useStore } from '../stores/index';
import { storeToRefs } from 'pinia';
import { useRouter } from 'vue-router';
const router = useRouter()
const store = useStore()
let socialInfo: SocialInfo
const BaseUrl = store.getBaseUrl()
onBeforeMount(() => {
    socialInfo = store.getSocialInfo();
})
const switchShow = inject(switchLoginModelShowKey)
const { isLogin, UserInfo } = storeToRefs(store)
const toUserPage = (index: number) => {
    switch (index) {
        case 0:
            router.push({
                name: 'personCenter',
                params: { userId: UserInfo.value.id, type: 'center' }
            })
            break;
        case 1:
            router.push({
                name: 'personCenter',
                params: {
                    userId: UserInfo.value.id,
                    type: 'posts'
                }
            })
            break
        case 2:
            router.push({
                name: 'personCenter',
                params: {
                    userId: UserInfo.value.id,
                    type: 'follow'
                }
            })
            break
        case 3:
            router.push({
                name: 'personCenter',
                params: {
                    userId: UserInfo.value.id,
                    type: 'fans'
                }
            })
            break
    }

}
</script>
<template>
    <div class="user" v-if="isLogin == 1">
        <div class="top">
            <div class="avatar" @click="toUserPage(0)">
                <img :src="BaseUrl + '/static/image/' + UserInfo.avatar">
            </div>
            <div class="userInfo">
                <a class="userName" style="cursor: pointer;" @click="toUserPage(0)">{{ UserInfo.name }}</a>
                <!-- <a class="userLevel">Lv.7</a>
                <button>签到</button> -->
            </div>
        </div>
        <div class="bottom">
            <div class="social" @click="toUserPage(1)">
                <p class="number">{{ socialInfo.post }}</p>
                <p class="text">动态</p>
            </div>
            <div class="social" @click="toUserPage(2)">
                <p class="number">{{ socialInfo.concerns }}</p>
                <p class="text">关注</p>
            </div>
            <div class="social" @click="toUserPage(3)">
                <p class="number">{{ socialInfo.fans }}</p>
                <p class="text">粉丝</p>
            </div>
        </div>
    </div>
    <div class="user" v-else-if="isLogin == -1">
        <div class="notLogin">
            <p>还未登录,点击登录享受隅谷音乐提供的优质音乐</p>
            <a @click="switchShow">用户登录</a>
        </div>
    </div>
</template>
<style scoped lang="css">
.social {
    cursor: pointer;
}

.userName:hover,
.social:hover {
    color: var(--blue-style);
}

.notLogin {
    display: flex;
    padding: 20px;
    font-size: 14px;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.notLogin p {
    color: #666666;
    line-height: 20px;
    font-size: 12px;
}

.notLogin a {
    cursor: pointer;
    width: 50%;
    background-color: #C20C0C;
    color: white;
    height: 35px;
    border-radius: 5px;
    text-align: center;
    line-height: 35px;
}

.user {
    border-bottom: #D4D4D4 1px solid;
    background-color: #F6F6F6;
}

.user .bottom {
    display: flex;
    justify-content: space-around;
    align-items: center;
    text-align: center;
    margin-bottom: 15px;
}

.user .bottom div {
    flex: 1;
}

.user .bottom div:nth-child(-n+2) {
    border-right: 1px solid gray;
}

.user .bottom .text {
    font-size: 15px;
}

.user .bottom .number {
    font-size: 20px;
}

.user .bottom p {
    margin: 0;
}

.avatar,
.avatar img {
    width: var(--avatar-size);
    height: var(--avatar-size);
}

.avatar {
    margin: 20px;
    cursor: pointer;
}

.user .top {
    display: flex;
    margin-bottom: 2px;
}

.user .top .userInfo {
    margin-top: 22px;
}

.user .top .userInfo a {
    display: block;
    font-size: 14px;
    margin-bottom: 5px;
}

.user .user .top .userInfo .userName {
    margin-bottom: 5px;
}

.user .top .userInfo .userLevel {
    margin-bottom: 12px;
    border: 1px solid gray;
    border-radius: 9px;
    font-size: 12px;
    text-align: center;
    width: 35px;
}

.user .top .userInfo button {
    width: 70px;
    height: 30px;
    color: #bebebe;
    background-color: #f0f0f0;
    border-radius: 6px;
}

.user .top p {
    margin: 0;
}
</style>